<template>
    <el-container style="height: 100vh">
        <el-aside width="220px" style=" color:#fff;background:#2d3a4b;">
            <div style="display:flex;height:60px;font-size:20px;font-weight:bold;align-items:center;justify-content:center;">G6 示例</div>
            <el-menu :default-active="$route.path" router background-color="#2d3a4b" text-color="#fff" active-text-color="#409EFF" style="border:none">
                <el-menu-item index="/antvg6/demo1">基础用法</el-menu-item>
                <el-menu-item index="/antvg6/demo2">自定义节点</el-menu-item>
                <el-menu-item index="/antvg6/demo3">交互操作</el-menu-item>
                <el-menu-item index="/antvg6/demo4">分组与子图</el-menu-item>
                <el-menu-item index="/antvg6/demo5">复杂流程图</el-menu-item>
                <el-menu-item index="/antvg6/demo6">动态数据</el-menu-item>
                <el-menu-item index="/antvg6/demo7">动画与样式</el-menu-item>
                <el-menu-item index="/antvg6/demo8">力导向布局</el-menu-item>
                <el-menu-item index="/antvg6/demo9">环形布局</el-menu-item>
                <el-menu-item index="/antvg6/demo10">网格布局</el-menu-item>
                <el-menu-item index="/antvg6/demo11">层次布局</el-menu-item>
                <el-menu-item index="/antvg6/demo12">径向布局</el-menu-item>
                <el-menu-item index="/antvg6/mindmap">脑图树布局</el-menu-item>
                <el-menu-item index="/antvg6/company-relation">公司关系网络图</el-menu-item>
                <el-menu-item index="/antvg6/point-side">点+边性能</el-menu-item>
                <el-menu-item index="/antvg6/point-side-label">点+边性能+文本</el-menu-item>
                <el-menu-item index="/antvg6/auto-size">节点自适应文本</el-menu-item>
                <el-menu-item index="/antvg6/gpt-point">GPT节点自适应文本</el-menu-item>
                <el-menu-item index="/antvg6/display-mindmap">显示器思维导图</el-menu-item>
            </el-menu>
        </el-aside>
        <el-container>
            <el-main style="padding:24px;">
                <router-view />
            </el-main>
        </el-container>
    </el-container>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router';
import 'element-plus/es/components/container/style/css';
import 'element-plus/es/components/aside/style/css';
import 'element-plus/es/components/menu/style/css';
import 'element-plus/es/components/menu-item/style/css';
import 'element-plus/es/components/main/style/css';
const $route = useRoute();
</script>

<style scoped lang="less">
.el-aside {
  min-height: 100vh;
  box-shadow: 2px 0 8px #f0f1f2;
}

.el-menu {
  border-right: none;
}
</style>
<style>
#container {
    width: 100%;
    height: 800px !important;
}
</style>